<template>
  <div class="invite_reward">

    <div class="inv_reBg">

      <div class="inv_reTitleBg">

        <div class="inv_reTitle">
          <img src="@/assets/img/invite_reward/title_left.png" >
          <span>
            积分补贴
          </span>
          <img src="@/assets/img/invite_reward/title_right.png" >
        </div>

        <div class="R">

        <!--  <div class="Le">
            积分抵扣规则 >>
          </div> -->

          <div class="Ri">
            <img src="@/assets/img/invite_reward/free_new_sx.png" >
            <span>
              刷新进度
            </span>
          </div>

        </div>

      </div>

      <div class="inv_reMainBg">
        <ul class="t">
          <!-- <li>
            <div class="Lit">

              <div class="top_00">
                <img src="@/assets/img/invite_reward/reward_00.png" >
                <div class="top_ceng_00">

                  <div class="t_c_00">
                    <h4>
                      +10000
                    </h4>
                    <div class="tit">
                      <img src="@/assets/img/invite_reward/jf_press_bgx_left.png" >
                      <span>
                        积分
                      </span>
                      <img src="@/assets/img/invite_reward/jf_press_bgx_right.png" >
                    </div>
                  </div>

                  <h3>
                    分享得积分
                  </h3>

                </div>
              </div>

            </div>
          </li> -->
          <li>

            <div class="Lit">
              <div class="top_01">
                <img src="@/assets/img/invite_reward/reward_01.png" >
                <div class="top_ceng_00">

                  <div class="t_c_00">
                    <h4>
                      +{{shareData.invite_new_user}}
                    </h4>
                    <div class="tit">
                      <img src="@/assets/img/invite_reward/jf_press_bgx_left.png" >
                      <span>
                        积分
                      </span>
                      <img src="@/assets/img/invite_reward/jf_press_bgx_right.png" >
                    </div>
                  </div>

                  <h3>
                    邀请新用户访问分享<br/>内容并登录
                  </h3>

                </div>
              </div>
            </div>

          </li>
          <li>

            <div class="Lit">
              <div class="top_01">
                <img src="@/assets/img/invite_reward/reward_02.png" >
                <div class="top_ceng_00">

                  <div class="t_c_00">
                    <h4>
                      +{{shareData.invite_spend}}
                    </h4>
                    <div class="tit">
                      <img src="@/assets/img/invite_reward/jf_press_bgx_left.png" >
                      <span>
                        积分
                      </span>
                      <img src="@/assets/img/invite_reward/jf_press_bgx_right.png" >
                    </div>
                  </div>

                  <h3>
                    邀请的新用户<br/>充值付费
                  </h3>

                </div>
              </div>
            </div>

          </li>


        </ul>
        <div class="m">
          <div class="line"></div>
          <ul class="m_MainBg">
            <li>
              <img src="@/assets/img/invite_reward/coin_step_00.png" alt="" class="got">
              <div class="block"></div>
            </li>
           <!-- <li>
              <img src="@/assets/img/invite_reward/coin_step_00.png" alt="" class="got">

            </li> -->
            <li>
              <img src="@/assets/img/invite_reward/coin_step_01.png" alt="" class="got">

            </li>
          </ul>

        </div>
        <ul class="b">

          <!-- <li>

            <ul class="t_ul_box">
            	<li>
                <div class="Le">
                  <img src="@/assets/img/invite_reward/bot/pyq.png" >
                  <div class="leTxt">
                    <p>
                      分享朋友圈
                    </p>
                    <div class="money">
                      <span>
                        +5000
                      </span>
                      <img src="@/assets/img/invite_reward/bot/xbs.png" >
                    </div>
                  </div>
                </div>
                <div class="Ri">
                  立即领取
                </div>
              </li>
            	<li>
            	  <div class="Le">
            	    <img src="@/assets/img/invite_reward/bot/qq.png" >
            	    <div class="leTxt">
            	      <p>
            	        分享QQ空间
            	      </p>
            	      <div class="money">
            	        <span>
            	          +3000
            	        </span>
            	        <img src="@/assets/img/invite_reward/bot/xbs.png" >
            	      </div>
            	    </div>
            	  </div>
            	  <div class="Ri">
            	    立即领取
            	  </div>
            	</li>
              <li>
                <div class="Le">
                  <img src="@/assets/img/invite_reward/bot/wb.png" >
                  <div class="leTxt">
                    <p>
                      分享微博
                    </p>
                    <div class="money">
                      <span>
                        +2000
                      </span>
                      <img src="@/assets/img/invite_reward/bot/xbs.png" >
                    </div>
                  </div>
                </div>
                <div class="Ri">
                  立即领取
                </div>
              </li>
            </ul>




            <div class="btnBoxBg">
              <div class="btnBox">
                <img src="@/assets/img/invite_reward/bot/btn_tip_00.png" >
                <span>
                  下载分享海报到更多渠道
                </span>
              </div>
            </div>


          </li> -->
          <li>
            <img src="@/assets/img/invite_reward/bot/suo.png" alt="" class="tag">

            <div class="t_txt">
              <p>
                邀请新用户【注册登录】
              </p>
              <span>
                奖励{{shareData.invite_new_user}}积分
              </span>
            </div>

            <!-- <div class="btnBoxBg">
              <div class="btnBox">
                <img src="@/assets/img/invite_reward/bot/btn_tip_01.png" >
                <span>
                  如何邀请，才算邀请成功？
                </span>
              </div>
            </div> -->

          </li>
          <li>
            <img src="@/assets/img/invite_reward/bot/suo.png" alt="" class="tag">

            <div class="t_txt">
              <p>
                邀请的新用户
                充值付费
              </p>
              <span>
                奖励{{shareData.invite_spend}}积分
              </span>
            </div>

          </li>


        </ul>

      </div>
     <div class="mb_inv_reM_bg">

      <ul class="mb_inv_reMainBg">
        <!-- <li class="step_00">
          <div class="Lit">

            <div class="top_00">
              <img src="@/assets/img/invite_reward/reward_00.png" >
              <div class="top_ceng_00">

                <div class="t_c_00">
                  <h4>
                    +10000
                  </h4>
                  <div class="tit">
                    <img src="@/assets/img/invite_reward/jf_press_bgx_left.png" >
                    <span>
                      积分
                    </span>
                    <img src="@/assets/img/invite_reward/jf_press_bgx_right.png" >
                  </div>
                </div>

                <h3>
                  分享得积分
                </h3>

              </div>
            </div>

          </div>
          <div class="Lib">
            <ul class="t_ul_box">
            	<li>
                <div class="Le">
                  <img src="@/assets/img/invite_reward/bot/pyq.png" >
                  <div class="leTxt">
                    <p>
                      分享朋友圈
                    </p>
                    <div class="money">
                      <span>
                        +5000
                      </span>
                      <img src="@/assets/img/invite_reward/bot/xbs.png" >
                    </div>
                  </div>
                </div>
                <div class="Ri">
                  立即领取
                </div>
              </li>
            	<li>
            	  <div class="Le">
            	    <img src="@/assets/img/invite_reward/bot/qq.png" >
            	    <div class="leTxt">
            	      <p>
            	        分享QQ空间
            	      </p>
            	      <div class="money">
            	        <span>
            	          +3000
            	        </span>
            	        <img src="@/assets/img/invite_reward/bot/xbs.png" >
            	      </div>
            	    </div>
            	  </div>
            	  <div class="Ri">
            	    立即领取
            	  </div>
            	</li>
              <li>
                <div class="Le">
                  <img src="@/assets/img/invite_reward/bot/wb.png" >
                  <div class="leTxt">
                    <p>
                      分享微博
                    </p>
                    <div class="money">
                      <span>
                        +{{shareData.invite_new_user}}
                      </span>
                      <img src="@/assets/img/invite_reward/bot/xbs.png" >
                    </div>
                  </div>
                </div>
                <div class="Ri">
                  立即领取
                </div>
              </li>
            </ul>

          </div>
          <img src="@/assets/img/invite_reward/coin_step_00.png" class="tgImg" >
        </li> -->
        <li class="step_00">
          <div class="Lit">
            <div class="top_01">
              <img src="@/assets/img/invite_reward/reward_01.png" >
              <div class="top_ceng_00">

                <div class="t_c_00">
                  <h4>
                    +{{shareData.invite_new_user}}
                  </h4>
                  <div class="tit">
                    <img src="@/assets/img/invite_reward/jf_press_bgx_left.png" >
                    <span>
                      积分
                    </span>
                    <img src="@/assets/img/invite_reward/jf_press_bgx_right.png" >
                  </div>
                </div>

                <h3>
                  邀请新用户访问分享<br/>内容并登录
                </h3>

              </div>
            </div>
          </div>
          <div class="Lib">
            <img src="@/assets/img/invite_reward/bot/suo.png" alt="" class="tag">

            <div class="t_txt">
              <p>
                邀请新用户【注册登录】
              </p>
              <span>
                奖励{{shareData.invite_new_user}}积分
              </span>
            </div>



          </div>
          <img src="@/assets/img/invite_reward/coin_step_00.png" class="tgImg" >

        </li>
        <li>

          <div class="Lit">
            <div class="top_01">
              <img src="@/assets/img/invite_reward/reward_02.png" >
              <div class="top_ceng_00">

                <div class="t_c_00">
                  <h4>
                    +{{shareData.invite_spend}}
                  </h4>
                  <div class="tit">
                    <img src="@/assets/img/invite_reward/jf_press_bgx_left.png" >
                    <span>
                      积分
                    </span>
                    <img src="@/assets/img/invite_reward/jf_press_bgx_right.png" >
                  </div>
                </div>

                <h3>
                  邀请的新用户<br/>充值付费
                </h3>

              </div>
            </div>
          </div>
          <div class="Lib">
            <img src="@/assets/img/invite_reward/bot/suo.png" alt="" class="tag">

            <div class="t_txt">
              <p>
                邀请的新用户充值付费
              </p>
              <span>
                奖励{{shareData.invite_spend}}积分
              </span>
            </div>


          </div>
          <img src="@/assets/img/invite_reward/coin_step_01.png" class="tgImg" >

        </li>

      </ul>
     </div>
    </div>

    <!-- <dl>
       <dt>
         邀请链接
       </dt>
       <dd>
         这是链接 取当前的域名加用户id  ?id= 加复制按钮
       </dd>
     </dl>
     <dl>
       <dt>
         邀请二维码
       </dt>
       <dd>
          取当前的域名加用户id
       </dd>
     </dl> -->

     <dl class="tuBg">
     	<dt>
     		<h3>
     			邀请链接
     		</h3>

     		<div class="tgLink">
     			{{tgLink}}
     		</div>

     		<div v-clipboard:copy="tgLink" v-clipboard:success="onCopy" v-clipboard:error="onError" class="copy idx_Reg">
     			复制
     		</div>

     	</dt>
     	<dd>
     		<h3>
     			邀请二维码
     		</h3>

     		<div class="QRCodeDiv" ref="qrCodeDiv">

     		</div>

     	</dd>
     </dl>


  </div>
</template>

<script>
    import QRCode from 'qrcodejs2';
  // 仿https://www.paperyy.cn/member_new/free
  export default{
    data(){
      return{
        tgLink:"",
        shareData:null
      }
    },
    mounted() {
      let that=this;
      that.getShareFn();
      setTimeout(()=>{
        that.init_InviteFn();
      },500);
      setTimeout(()=>{
        that.init_InviteFn();
      },1000);
      setTimeout(()=>{
        that.init_InviteFn();
      },1500);

    },
    methods:{

      init_InviteFn(){
        let that=this;
        this.tgLink=window.location.host+"/?id="+that.myInfo.id;
        this.$refs.qrCodeDiv.innerHTML="";
        new QRCode(this.$refs.qrCodeDiv, {
        	      text: this.tgLink,
        	      width: 200,
        	      height: 200,
        	      colorDark: "#333333", //二维码颜色
        	      colorLight: "#ffffff", //二维码背景色
        	      correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
        })

      },

      // 获取分享奖励设置
      getShareFn(val){
        let that=this;
        console.log("获取分享奖励设置");
        this.$request.get(
          "/generic/invite",
          {

          },
          {
            'Content-Type': 'multipart/form-data'
          }
        ).then((res)=>{
         	console.log("获取分享奖励设置请求成功：",res);
          that.shareData=res.data.data.config;
         })
         .catch((err)=>{
         	console.log("获取分享奖励设置请求失败：",err);
         });

      },


      onCopy(){
      		this.$bus.$emit("toastEvent","复制成功!");
      	},
      	onError(){
      		this.$bus.$emit("toastEvent","复制失败!");
      	}

    }
  }
</script>

<style lang="less" scoped="scoped">
  @import "../assets/css/invite_reward.less";
</style>
